<template>
  <tm-scrolly ref="scrollRef" :height="listHeight" :refresher="false" @bottom="onScrollToBottom">
    <view>
      <view class="" v-if="searchList.length > 0">
        <uni-card v-for="(item,index) in searchList" :key="item.communityId">
          <view class="searchName" @click="navigateToElevator(item)">
            {{ item.name }}
            <view class="searchNum">
              {{ item.elevatorCount }}
              <text>
                部电梯
              </text>
            </view>
          </view>
        </uni-card>
      </view>

      <view v-else>
        <null-page></null-page>
      </view>
    </view>
  </tm-scrolly>
</template>

<script>


import nullPage from '@/components/null.vue'
import {listCommunity} from "@/api/system/community";
import {useWindowInfo} from "@/tmui/tool/useFun/useWindowInfo";

export default {
  components: {
    nullPage,
  },
  data() {
    return {
      searchList: [],
      communityName: "",
      pageNum: 1,
      getListFlag: true,
      type: '',
      listHeight: 1000
    }
  },
  onLoad(e) {
    /**
     * 获取页面高度 减去上面筛选的高度 再减去下面底部的高度 单位px
     * 返回需要转换为rpx
     */
    const windowInfo = useWindowInfo();
    /**
     * h5获取的height是所有元素的height
     * 微信获取的height是不包标题栏的
     * 但是h5的标题高度会在top属性显示  微信为0
     * 使用height - top就是实际页面高度 不用判断环境了
     */
    const windowHeight = windowInfo.height;
    const titleHeight = windowInfo.top;
    // 头部区域高度
    const headHeight = 40;
    // 底部区域高度
    const bottomHeight = 30;
    const bottomSafe = windowInfo.bottomSafe;
    this.listHeight = uni.$tm.u.torpx(
        windowHeight - titleHeight - headHeight - bottomHeight - bottomSafe,
    );
    this.type = e.type
    this.communityName = e.communityName
    this.getpollingList();
  },
  methods: {
    async getpollingList() {
      let parme = {
        pageNum: this.pageNum,
        pageSize: 20,
      }
      const res = await listCommunity(parme)
      console.log("res", res);
      if (res.rows.length < 10 && this.searchList.length > 0) {
        uni.showToast({
          title: '已加载全部',
          icon: 'none'
        })
        return
      }
      this.searchList = this.searchList.concat(res.rows)
      // this.searchList.push(...res.data.data.list)
    },
    navigateToElevator(item) {
      uni.navigateTo({
        url: '../details?id=' + item.communityId + '&title=' + item.name + '&type=' + this.type,
      });
    },
    onScrollToBottom(e) {
      if (this.getListFlag) {
        this.pageNum = this.pageNum + 1;
        this.getpollingList();
      }
    }
  },
}
</script>

<style scoped>
.uni-card {
  border: none;
  background: #FFFFFF;
  width: 670rpx;
  height: 108rpx;
  background: #FFFFFF;
  box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(52, 54, 61, 0.05);
  border-radius: 16rpx;
  margin: 0 auto;
  margin-top: 20rpx;

}

.searchName {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #34363D;

}

.searchNum {
  font-size: 40rpx;
  font-family: Arial;
  font-weight: bold;
  color: #017EFE;

}

.searchNum text {
  color: #989BA6;
  font-size: 24rpx;
}
</style>
